<template>
	<div class="anchor">
		<div class="anchor_item" v-for="(item,index) in list" :key="index" @click='anchorEvent(item.anchor_id)'>
			<div class="anchor_item_left">
				<image :src="item.image" mode=""></image>
			</div>
			<div class="anchor_item_right">
				<div class="anchor_item_right_top">
					<div class="anchor_item_right_top_left ex">
						{{item.name || ''}}
						<image src="https://wx.sjcmhz.com/static/image/pageA/nan.png" mode=""></image>
					</div>
					<div class="anchor_item_right_top_right">
						{{item.status | statusFilter}}
					</div>
				</div>
				<div class="anchor_item_right_center">
					<div class="anchor_item_right_center_items">
						{{item.type || ''}}
					</div>
					<div class="anchor_item_right_center_right">
						<!-- 待改提点 -->
					</div>
				</div>
				<div class="anchor_item_right_bottom">
					<!-- 和而泰1栋1401
					 -->
					{{item.room_name || ''}}
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		filters: {
			statusFilter(v) {
				var s = ''
				// 入住状态 -1邀约 0保存草稿 1审核中 2审核通过 3待搬家 4已搬离
				switch (v) {
					case '-1':
						s = '邀约'
						break;
					case '0':
						s = '保存草稿'
						break;
					case '1':
						s = '审核中'
						break;
					case '2':
						s = '审核通过'
						break;
					case '3':
						s = '待搬家'
						break;
					case '4':
						s = '已搬离'
						break;
				}
				return s
			}
		},
		props: {
			list: [String, Array]
		},
		data() {
			return {

			}
		},
		methods: {
			anchorEvent(id) {
				uni.navigateTo({
					url: '/pagesA/index/anchorList/anchorDetail?id=' + id
				})
			}
		}
	}
</script>

<style lang="less">
	.anchor {
		width: 750rpx;
		height: 100%;

		.anchor_item {
			width: 694rpx;
			height: 198rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 0 auto;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;
		}

		.anchor_item_left {
			width: 120rpx;
			height: 120rpx;
			margin-right: 34rpx;
			min-width: 120rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background: #f5f5f5;
			}
		}

		.anchor_item_right {

			.anchor_item_right_top,
			.anchor_item_right_center,
			.anchor_item_right_bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 480rpx;
			}

			.anchor_item_right_top_left {
				font-size: 32rpx;
				font-weight: 500;
				max-width: 300rpx;

				image {
					width: 24rpx;
					height: 24rpx;
					margin-left: 8rpx;
				}
			}

			.anchor_item_right_top_right {
				font-size: 26rpx;
				color: #666;
			}

			.anchor_item_right_center {
				margin-top: 10rpx;
			}

			.anchor_item_right_center_items {
				font-size: 26rpx;
				min-width: 6rpx;
				// height: 34rpx;
				padding: 2rpx 12rpx;
				box-sizing: border-box;
				background: #2E61FF;
				color: #fff;
			}

			.anchor_item_right_center_right {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #999;
			}

			.anchor_item_right_bottom {
				margin-top: 10rpx;
				font-size: 24rpx;
			}
		}
	}
</style>